<!--
 * @Descripttion: 选择酒品等级
 * @version: 
 * @Author: hutao
 * @Date: 2021-12-30 14:30:05
 * @LastEditors: hutao
 * @LastEditTime: 2023-06-07 11:26:54
-->
<template>
  <el-select v-if="!readonly"
             :disabled="disabled"
             :clearable="clearable"
             filterable
             :multiple="multiple"
             v-model="state.value"
             @change="onChange"
             style="width: 100%"
             placeholder="请选择">
    <el-option v-for="item in  state.dataSource"
               :key="item.id"
               :label="`${item.name}`"
               :value="item.name">
    </el-option>
  </el-select>

  <span v-else>{{ state.showName }}</span>
</template>
<script lang="ts">
import { WineBreedApi } from "@/plugins/api";
import { _axios } from "vue-kst-auth";
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
interface State {
  /** 数据状态 */
  loading: boolean;
  value?: string | string[];
  showName?: string;
  dataSource: any[];
}
@Component
export default class Index extends Vue {
  WineBreedApi = new WineBreedApi("/alcohol-management", _axios);
  @Prop() value!: string | string[];
  @Prop() orgId!: string | string[];
  @Prop() userId!: string | string[];
  @Prop() currentOrg!: boolean;
  /** 是否可以清除 */
  @Prop({ default: true }) clearable!: string;
  /* 是否只读 */
  @Prop({ default: false }) readonly?: boolean;
  @Prop({ default: false }) multiple?: boolean;
  /** 是否禁用 */
  @Prop() disabled?: boolean;
  /** 数据 */
  state: State = {
    loading: false,
    value: undefined,
    showName: "",
    dataSource: [],
  };
  /** 生命周期 */
  created() {
    this.state.value = this.value;
    this.remoteMethod();
    //this.getDataSource();
  }

  remoteMethod(query?: string) {
    // if (query) {
    this.state.loading = true;
    this.WineBreedApi.breedGrade()
      .then((res) => {
        this.state.dataSource = res || [];
      })
      .finally(() => {
        this.state.loading = false;
      });
  }
  /** 方法 */
  onChange() {
    this.$emit("input", this.state.value);
    if (this.state.value) {
      this.$emit(
        "change",
        this.state.value,
        this.state.dataSource.find((item) => item.id === this.state.value)
      );
    } else {
      this.$emit("change", this.state.value, undefined);
    }
  }
  /** 监听 */
  @Watch("value")
  onValue(val: string) {
    this.state.value = val;
    if (this.readonly) {
      if (val) {
        // this.StoreRoomApi.storeRooms3(val).then((res) => {
        //   this.state.showName = res.name;
        // });
      }
    } else {
      //
    }
  }

  /** 计算属性 */
  get dataSource() {
    const data = this.state.dataSource;

    if (this.orgId) {
      return this.state.dataSource.filter((item) =>
        item.organizationUnitId
          ? this.orgId.includes(item.organizationUnitId)
          : true
      );
    } else if (this.userId) {
      // return this.state.dataSource.filter((item) =>
      //   item.administrators?.some((admin) => admin.userId === this.userId)
      // );
    }
    return data;
  }
  get getName() {
    const data = this.state.dataSource.find(
      (item: any) => item.id === this.value
    );
    return data ? data.name : "";
  }
}
</script>
<style lang="scss" scoped></style>
